<template>
	<el-dialog width="70%" :close-on-click-modal="false" title="注释" draggable v-model="visible">
		<CodeDiff style="width: 100%; height: 400px" :old-string="oldString" :new-string="newString" output-format="side-by-side" />
		<!-- <div class="title" style="margin-bottom: 18px;">代码解释</div>
		<el-card style="width: 100%; height: 200px">
			<el-input v-model="textarea" :readonly="readonly" style="width: 100%; height: 100%" :rows="7" type="textarea" placeholder="" />
		</el-card> -->
		<el-card style="width: 100%; height: 230px">
			<template #header>
				<div class="card-header">
					<span>代码解释</span>
				</div>
			</template>
			<el-row :gutter="24">
				<el-col :span="23" style="width: 100%; height: 100%">
					<el-input v-model="textarea" :readonly="readonly" style="width: 100%; height: 100%" :rows="6" type="textarea" placeholder="" />
				</el-col>
				<el-col :span="1">
					<div class="icon">
						<el-icon style="font-size: 20px; color: #999999; cursor: pointer" @click="getRefresh"><Refresh /></el-icon>
					</div>
					<div class="icon">
						<el-icon style="font-size: 18px; color: #999999; cursor: pointer" @click="getCopyDocument"><CopyDocument /></el-icon>
					</div>
					<div class="icon">
						<el-icon style="font-size: 18px; color: #999999; cursor: pointer" @click="getShare"><Share /></el-icon>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<template #footer>
			<div class="dialog-footer">
				<el-button style="color: #009678" @click="readonly = false">编辑</el-button>
				<el-button style="background: #009678; color: #fff">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { CodeDiff } from 'v-code-diff';

// 定义变量内容
const visible = ref(false);
const readonly = ref(true);
const textarea = ref('');
const oldString = ref(
	'SELECT  wk_order.cs_revst_wk_order_id    --95598回访工单标识\n        ,wk_order.revst_wk_order_no    --被回访工单编号\n        ,wk_order.mgt_org_code    --管理单位编码\n        ,org.mgt_org_name    --管理单位名称\n        ,org.prov_code    --省公司编码\n        ,org.prov_name    --省公司名称\n        ,org.city_code    --地市公司编码\n        ,org.city_name    --地市公司名称\n        ,org.county_code    --区县公司编码\n        ,org.county_name    --区县公司名称\n        ,org.branch_off_code    --分公司编码\n        ,org.branch_off_name    --分公司名称\n        ,org.pow_sup_station_code    --供电所编码\n        ,org.pow_sup_station_name    --供电所名称\n        ,wk_order.revst_stat    --回访状态\n        ,wk_order.revst_bus_type    --回访业务类型\n        ,wk_order.acpt_time    --业务受理时间\n        ,wk_order.hndl_acmp_time    --处理完成时间\n        ,wk_order.revst_cont    --回访内容\n        ,wk_order.revst_contact    --回访联系人\n        ,wk_order.revst_mode    --回访方式\n        ,wk_order.contact_tel    --联系电话\n        ,wk_order.revst_dur    --回访期限\n        ,wk_order.plan_revst_stf    --计划回访人员\n        ,wk_order.plan_retvisit_time    --计划回访时间\n        ,wk_order.send_stat    --发送状态\n        ,wk_order.revst_fail_times    --已回访失败次数\n        ,wk_order.acpt_stsf    --受理满意度\n        ,wk_order.hndl_stsf    --处理满意度\n        ,rslt.cs_revst_rslt_id    --95598回访结果标识\n        ,rslt.attach_id    --附件标识\n        ,rslt.revst_org_code    --回访单位编码\n        ,rslt.revst_dept    --回访部门\n        ,rslt.revst_stf    --回访人员\n        ,rslt.revst_time    --回访时间\n        ,rslt.revst_succ_flag    --回访成功标志\n        ,rslt.revst_reason    --回访失败原因\n        ,rslt.revst_arr_time    --回访到达现场时间\n        ,rslt.revst_cust_opn    --回访客户意见\nFROM    pro_ods_js_cms2_prod.ods_db5_cs_revst_wk_order wk_order    --95598回访工单\nLEFT JOIN pro_ods_js_cms2_prod.ods_db5_cs_revst_rslt rslt    --95598回访结果\nON      wk_order.cs_revst_wk_order_id = rslt.cs_revst_wk_order_id \nLEFT JOIN    js_js_dwd_proj_prod.dim_cst_gen_mgt_org org    --管理单位维表\nON      wk_order.mgt_org_code = org.mgt_org_code\n;'
);
const newString = ref(
	'这是一段SQL代码，用于查询95598回访工单和回访结果的相关信息，同时关联管理单位维表，具体解释如下：\n\n```\nSELECT  --查询语句开始\n    wk_order.cs_revst_wk_order_id, --95598回访工单标识\n    wk_order.revst_wk_order_no, --被回访工单编号\n    wk_order.mgt_org_code, --管理单位编码\n    org.mgt_org_name, --管理单位名称\n    org.prov_code, --省公司编码\n    org.prov_name, --省公司名称\n    org.city_code, --地市公司编码\n    org.city_name, --地市公司名称\n    org.county_code, --区县公司编码\n    org.county_name, --区县公司名称\n    org.branch_off_code, --分公司编码\n    org.branch_off_name, --分公司名称\n    org.pow_sup_station_code, --供电所编码\n    org.pow_sup_station_name, --供电所名称\n    wk_order.revst_stat, --回访状态\n    wk_order.revst_bus_type, --回访业务类型\n    wk_order.acpt_time, --业务受理时间\n    wk_order.hndl_acmp_time, --处理完成时间\n    wk_order.revst_cont, --回访内容\n    wk_order.revst_contact, --回访联系人\n    wk_order.revst_mode, --回访方式\n    wk_order.contact_tel, --联系电话\n    wk_order.revst_dur, --回访期限\n    wk_order.plan_revst_stf, --计划回访人员\n    wk_order.plan_retvisit_time, --计划回访时间\n    wk_order.send_stat, --发送状态\n    wk_order.revst_fail_times, --已回访失败次数\n    wk_order.acpt_stsf, --受理满意度\n    wk_order.hndl_stsf, --处理满意度\n    rslt.cs_revst_rslt_id, --95598回访结果标识\n    rslt.attach_id, --附件标识\n    rslt.revst_org_code, --回访单位编码\n    rslt.revst_dept, --回访部门\n    rslt.revst_stf, --回访人员\n    rslt.revst_time, --回访时间\n    rslt.revst_succ_flag, --回访成功标志\n    rslt.revst_reason, --回访失败原因\n    rslt.revst_arr_time, --回访到达现场时间\n    rslt.revst_cust_opn --回访客户意见\nFROM    --查询数据来源\n    pro_ods_js_cms2_prod.ods_db5_cs_revst_wk_order wk_order --95598回访工单\nLEFT JOIN pro_ods_js_cms2_prod.ods_db5_cs_revst_rslt rslt --95598回访结果\nON      wk_order.cs_revst_wk_order_id = rslt.cs_revst_wk_order_id --连接条件为95598回访工单标识\nLEFT JOIN js_js_dwd_proj_prod.dim_cst_gen_mgt_org org --管理单位维表\nON      wk_order.mgt_org_code = org.mgt_org_code --连接条件为管理单位编码\n```\n\n其中，`SELECT`语句用于指定需要查询的字段，`FROM`语句用于指定查询的数据来源，`LEFT JOIN`语句用于连接两个表，`ON`语句用于指定连接条件。最终查询结果包括95598回访工单和回访结果的相关信息，以及管理单位的名称和编码等信息。'
);

// 打开弹窗
const openDialog = (row: any) => {
	visible.value = true;
	readonly.value = true;
	textarea.value = '';
	console.log(row);
};

const getRefresh = () => {
	alert('刷新');
};

const getCopyDocument = () => {
	alert('复制');
};

const getShare = () => {
	alert('展示');
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.icon {
	width: 100%;
	height: 33%;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
